<template>
  <div>
    <div class="title">
      <p class="back" @click="handleBack">←</p>
      <input
        class="ipt"
        name="name"
        
        placeholder="请输入歌曲"
        v-model="value"
        @keyup.enter="handleKeyup"
      />
      <!-- <img class="searchImg" src="/imgs/search.png"/> -->
      <button class="btn" style="width: 200px" @click="handleButton">
        搜索
      </button>
    </div>
    <div class="box">
      <div class="item" v-for="item of arr" :key="item.id">
        <div class="item_img"><img :src="item.picUrl" /></div>
        <div class="item_font">{{ item.alias }}{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      arr: [],
    };
  },
  methods: {
    handleBack() {
      this.$router.back();
    },
    handleKeyup() {
      this.handleAll();
    },
    handleButton() {
      this.handleAll();
    },
    
    handleAll() {
      this.$http(
        `http://47.108.197.28:3000/search?keywords=${this.value}`
      ).then((res) => {
        console.log();
        res.data.result.songs.forEach((item) => {
          var { id, name, duration } = item;
          this.$http(`http://47.108.197.28:3000/song/detail?ids=${id}`).then(
            (res) => {
              console.log();
              var picUrl = res.data.songs[0].al.picUrl;
              console.log(picUrl);
              this.arr.push({ id, name, picUrl, duration });
            }
          );
        });
      });
    },
  },
};
</script>

<style scoped>
.back {
  position: absolute;
  color: white;
  font-size: 40px;
  margin-top: -120px;
  margin-left: -20px;
}
/**index.wxss**/
.title {
  width: 10rem;
  height: 1.8667rem;
  background-color: #333;
  display: flex;
  align-items: center;
  padding: 0 0.2667rem;
  padding-top: 0.1333rem;
}
.ipt {
  width: 6.2667rem;
  display: inline-block;
  border-radius: 0.6667rem;
  height: 1.3333rem;
  padding-left: 1.0667rem;
  box-sizing: border-box;
  background-color: #fff;
}
.btn {
  display: inline-block;
  border-radius: 0.6667rem;
  height: 1.3333rem;
  line-height: 0.9333rem;
  background-color: #fff;
  position: relative;
  left: 0.4rem;
  font-size: 0.3733rem;
  font-weight: 100;
}
.searchImg {
  position: absolute;
  width: 0.6667rem;
  height: 0.6667rem;
  left: 0.5733rem;
  top: 0.6667rem;
}

.box {
  display: flex;
  flex-direction: column;
}
.item {
  width: 100%;
  height: 1.3333rem;
  display: flex;
  justify-content: space-between;
}
.item img {
  width: 1.3333rem;
  height: 1.3333rem;
  border-radius: 0.1333rem;
}
.item_img {
  flex: 1;
}
.item_font {
  flex: 6;
}
</style>